<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Query Certificate</title>
    <style>
      input {
        outline-style: none;
        border: 0px;
        border-radius: 8px;
        background-color: #ededed;
        padding: 16px 10px;
        font-size: 24px;
        width: 560px;
      }
      .container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url(./img/bg.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
      }
      .btn {
        width: 200px;
        height: 50px;
        line-height: 50px;
        /* border: solid 2px #333; */
        border-radius: 5px;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
      }
      .footer {
        /* width: 100%; */
        height: 114px;
        z-index: 99;
        background-image: url(./img/footer_en.png);
        background-position: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
    <script type="text/javascript">
      var curCert = null;
      var showScale = 0.3;
      var goodshow = 526 / 1152;

      window.onload = function () {
        var canvas = document.getElementById("imgContainer");
        // 1754*0.3 = 526
        var screenH = window.screen.height;
        // console.log(screenH);
        showScale = (screenH * goodshow) / 1754;
      };

      function keyDown(e) {
        // console.log(e)
        var keyCode = e.keyCode;
        if (keyCode === 13) {
          // 回车键
          queryCert();
        }
      }

      async function queryCert() {
        var input = document.getElementById("codeInput");
        var code = input.value;
        // console.log(code);
        var cert = await queryCertData(code);
        curCert = cert;
        if (curCert) {
          var cert_view = document.getElementById("cert_view");
          cert_view.style.display = "flex";
          var query_view = document.getElementById("query_view");
          query_view.style.display = "none";
          var canvas = document.getElementById("imgContainer");
          drawImage(canvas, showScale);
        } else {
          var err_view = document.getElementById("err_view");
          err_view.style.display = "block";
        }
      }

      async function queryCertData(code) {
        var cert = null;
        // switch (code) {
        //   case "T0001":
        //     cert = {
        //       name: "沙特代理商",
        //       code: "T0001",
        //       date: "2023-09-06",
        //       level: "1",
        //     };
        //     break;
        //   case "T0002":
        //     cert = {
        //       name: "南京代理商",
        //       code: "T0002",
        //       date: "2023-04-03",
        //       level: "2",
        //     };
        //     break;
        //   case "T0003":
        //     cert = {
        //       name: "广州代理商",
        //       code: "T0003",
        //       date: "2023-06-07",
        //       level: "3",
        //     };
        //     break;
        // }
        try {
          const Url = "https://operate.wulian.cc:50090/v1/certificate?sn=" + code;
          var data = await fetch(Url);
          var res = await data.json();
          // console.log(res);
          if (res && res.data && res.data.audience) {
            cert = {
              name: res.data.audience,
              code: res.data.sn,
              date: res.data.issueTime,
              level: res.data.level,
            };
          }
        } catch (error) {}

        return cert;
      }

      function drawImage(canvas, scale) {
        return new Promise((resolve, reject) => {
          // 1240 × 1754
          var width = 1240 * scale;
          var height = 1754 * scale;
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext("2d");

          // 绘制
          var newImg = new Image();
          switch (curCert.level) {
            case "1":
              newImg.src = "./img/basic_cert.png";
              break;
            case "2":
              newImg.src = "./img/intermediate_cert.png";
              break;
            case "3":
              newImg.src = "./img/advanced_cert.png";
              break;
            default:
              newImg.src = "./img/basic_cert.png";
              break;
          }
          newImg.onload = function () {
            ctx.drawImage(this, 0, 0, width, height);
            // 填写内容
            // 填写姓名
            ctx.font = 36 * scale + "px serif";
            ctx.fillText(curCert.name, 271 * scale, 690 * scale);
            // 填写编号
            ctx.font = 26 * scale + "px serif";
            ctx.fillText(curCert.code, 378 * scale, 1178 * scale);
            // 填写时间
            ctx.font = 26 * scale + "px serif";
            ctx.fillText(curCert.date, 378 * scale, 1265 * scale);

            resolve();
          };
          newImg.onerror = reject;
        });
      }

      async function download() {
        var canvas = document.getElementById("downloadCanvas");
        await drawImage(canvas, 1);
        // 文件流式下载
        // 方法一
        canvas.toBlob((blob) => {
          const a = document.createElement("a");
          a.download = "Certificate.png";
          a.style.display = "none";
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        });

        // 方法二
        // const a = document.createElement("a");
        // a.download = "基础认证证书.png";
        // a.style.display = "none";
        // a.href = canvas.toDataURL();
        // document.body.appendChild(a);
        // a.click();
        // document.body.removeChild(a);
      }

      function goBack() {
        var input = document.getElementById("codeInput");
        input.value = "";
        var cert_view = document.getElementById("cert_view");
        cert_view.style.display = "none";
        var query_view = document.getElementById("query_view");
        query_view.style.display = "flex";
        var err_view = document.getElementById("err_view");
        err_view.style.display = "none";
      }
    </script>
  </head>
  <body style="margin: 0; padding: 0">
    <canvas id="downloadCanvas" style="display: none"></canvas>
    <div class="container">
      <div
        id="query_view"
        style="
          display: flex;
          margin-top: -180px;
          flex-direction: column;
          justify-content: start;
          align-items: center;
          height: 200px;
          width: 600px;
          position: relative;
        "
      >
        <img src="./img//logo.png" width="174px" height="37px" />
        <span style="font-size: 32px; font-weight: 500; margin-top: 30px"
          >Please enter your certificate No.</span
        >
        <input
          id="codeInput"
          style="margin-top: 20px"
          placeholder="Certificate No."
          onkeydown="keyDown(event)"
        />
        <span
          id="err_view"
          style="
            display: none;
            font-size: 16px;
            font-weight: 400;
            margin-top: 15px;
            color: red;
          "
          >No Query results yet, please re-enter!</span
        >
        <div
          style="
            position: absolute;
            width: 50px;
            height: 50px;
            right: 16px;
            top: 136px;
          "
          onclick="queryCert()"
        >
          <img src="./img/search.png" width="50px" height="50px" />
        </div>
      </div>
      <div
        id="cert_view"
        style="
          display: none;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: -150px;
        "
      >
        <span
          style="
            color: white;
            font-weight: 500;
            font-size: 26px;
            margin-bottom: 25px;
          "
          >Query Results</span
        >
        <canvas id="imgContainer"></canvas>
        <div style="margin-top: 45px; display: flex; flex-direction: row">
          <div
            class="btn"
            style="background-color: #84af34; color: white"
            onclick="download()"
          >
            Download
          </div>
          <div
            class="btn"
            style="margin-left: 50px; background-color: white"
            onclick="goBack()"
          >
            Continue querying
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </body>
</html>
